<template>
  <div class="relative min-h-screen">
    <FinanceBackground />
    <el-scrollbar class="home-content relative z-10 h-screen">
      <!------------- SLOGAN ------------>
      <div class="home-slogan-section flex items-center h-screen justify-center">
        <el-card class="slogan-card p-5 w-2/3 h-1/2" body-class="flex justify-between">
          <div class="h-full flex flex-col justify-end">
            <p class="slogan-top">从数据到收益</p>
            <p class="slogan-bottom">每一分都不负所托</p>
          </div>
          <div class="flex flex-col justify-between">
            <div class="flex flex-col items-end">
              <p class="company">财通资管</p>
              <p class="company">量化及多资产投资部</p>
            </div>
            <div class="flex gap-x-8">
              <el-button
                class="liquid-glass-btn w-36 h-12 rounded-full"
                size="large"
                type="primary"
                @click="goToFunds"
                >产品详情</el-button
              >
              <el-button class="liquid-glass-btn w-36 h-12 rounded-full" size="large" type="primary"
                >联系我们</el-button
              >
            </div>
          </div>
        </el-card>
      </div>
      <!------------- CATEGORY ------------>
      <!-- <div class="home-categories-section h-screen flex items-center justify-center">
        <div
          class="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-x-6 gap-y-6 justify-items-center mx-56 py-8 w-full"
        >
          <el-card
            v-for="intro in FUNDS_INTRO"
            :key="intro.category"
            shadow="always"
            class="w-72 min-w-48"
          >
            <template #header>
              <div class="card-header">
                <span>{{ intro.category }}</span>
              </div>
            </template>
            <p>{{ intro.description }}</p>
            <template #footer>Footer content</template>
          </el-card>
        </div>
      </div> -->
      <!------------- FOOTER ------------>
      <!-- <div class="h-20">
        <div class="flex felx-row items-center justify-center h-full gap-x-4"></div>
      </div> -->
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import FinanceBackground from '@/components/FinanceBackground.vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const goToFunds = () => {
  router.push('/funds')
}
// const headerMenu = document.querySelector(
//   '.el-menu.el-menu--horizontal.header-menu',
// ) as HTMLElement | null

// const handleScroll = ({ scrollLeft, scrollTop }: { scrollLeft: number; scrollTop: number }) => {
//   console.log(scrollTop)
//   const viewportHeight = window.innerHeight
//   const targetScroll = 100 * (viewportHeight / 100) // 即 100vh
//   console.log(targetScroll)

//   if (scrollTop >= targetScroll) {
//     headerMenu?.classList.add('scrolled')
//   } else if (scrollTop < targetScroll) {
//     headerMenu?.classList.remove('scrolled')
//   }
// }
</script>

<style>
.slogan-card {
  border-radius: 32px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.slogan-top {
  font-size: 60px;
  color: var(--color-primary);
}

.slogan-bottom {
  font-size: 68px;
  color: var(--color-secondary);
}

.company {
  color: var(--font-secondary);
  font-weight: 600;
}

.home-categories-section {
  background-color: var(--bg-light);
}
</style>
